<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Breadcrumb from "./Breadcrumb.svelte";
    import { fn } from "storybook/test";
    import BreadcrumbItem from "./BreadcrumbItem.svelte";
    import Icon from "@iconify/svelte";

    const { Story } = defineMeta({
        title: "Components/Navigation/Breadcrumb",
        component: Breadcrumb,
        subcomponents: { BreadcrumbItem },
        tags: ["autodocs"],
        argTypes: {
            separator: {
                description: "Separator between items",
                table: {
                    defaultValue: { summary: "/" },
                },
            },
        },
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Breadcrumb>
            <BreadcrumbItem>home</BreadcrumbItem>
            <BreadcrumbItem>dashboard</BreadcrumbItem>
        </Breadcrumb>
    {/snippet}
</Story>

<Story name="Icon">
    {#snippet template(args)}
        <Breadcrumb>
            <BreadcrumbItem>
                {#snippet icon()}
                    <Icon icon="tabler:home-filled" />
                {/snippet}首页
            </BreadcrumbItem>
            <BreadcrumbItem>
                {#snippet icon()}
                    <Icon icon="tabler:layout-dashboard-filled" />
                {/snippet}
                面板
            </BreadcrumbItem>
            <BreadcrumbItem>管理</BreadcrumbItem>
        </Breadcrumb>
    {/snippet}
</Story>

<Story name="Hover">
    {#snippet template(args)}
        <Breadcrumb hover>
            <BreadcrumbItem>
                {#snippet icon()}
                    <Icon icon="tabler:home-filled" />
                {/snippet}首页
            </BreadcrumbItem>
            <BreadcrumbItem>
                {#snippet icon()}
                    <Icon icon="tabler:layout-dashboard-filled" />
                {/snippet}
                面板
            </BreadcrumbItem>
            <BreadcrumbItem>管理</BreadcrumbItem>
        </Breadcrumb>
    {/snippet}
</Story>

<Story name="Separator" args={{ separator: ">" }}>
    {#snippet template(args)}
        <Breadcrumb {...args}>
            <BreadcrumbItem>首页</BreadcrumbItem>
            <BreadcrumbItem>面板</BreadcrumbItem>
            <BreadcrumbItem>管理</BreadcrumbItem>
        </Breadcrumb>
    {/snippet}
</Story>
